<template>
  <view class="workbench-container">
    <!-- 顶部搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索功能菜单" 
          v-model="searchKeyword"
          @input="handleSearch"
        />
        <text class="clear-icon" v-if="searchKeyword" @click="clearSearch">✕</text>
      </view>
    </view>

    <!-- 菜单分组 -->
    <scroll-view class="menu-container" scroll-y>
      <view 
        class="menu-group" 
        v-for="group in filteredMenuGroups" 
        :key="group.id"
        v-show="group.menus.length > 0"
      >
        <view class="group-header">
          <text class="group-title">{{group.title}}</text>
          <text class="group-desc">{{group.description}}</text>
        </view>
        
        <view class="menu-grid">
          <view 
            class="menu-item" 
            v-for="menu in group.menus" 
            :key="menu.id"
            @click="handleMenuClick(menu)"
          >
            <view class="menu-icon-wrapper">
              <view class="menu-icon" :style="{backgroundColor: menu.color}">
                <text class="icon">{{menu.icon}}</text>
              </view>
              <view class="menu-badge" v-if="menu.badge">{{menu.badge}}</view>
            </view>
            <text class="menu-label">{{menu.label}}</text>
            <text class="menu-desc" v-if="menu.description">{{menu.description}}</text>
          </view>
        </view>
      </view>

      <!-- 搜索结果为空 -->
      <view class="empty-result" v-if="searchKeyword && filteredMenuCount === 0">
        <text class="empty-icon">🔍</text>
        <text class="empty-text">未找到相关功能</text>
        <text class="empty-desc">请尝试其他搜索关键词</text>
        <button class="empty-btn" @click="clearSearch">清空搜索</button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      menuGroups: [
        {
          id: 1,
          title: '设备管理',
          description: '设备监控与运维',
          menus: [
            {
              id: 101,
              icon: '📊',
              label: '电柜管理',
              path: '/pages/index/index',
              color: '#1890ff',
              description: '查看所有电柜状态',
            },
            {
              id: 102,
              icon: '🚪',
              label: '电池管理',
              path: '/pages/index/index',
              color: '#52c41a',
              description: '管理电柜仓门'
            },
            {
              id: 103,
              icon: '⚠️',
              label: '电表管理',
              path: '/pages/index/index',
              color: '#faad14',
              description: '所有电表管理'
            },
            {
              id: 104,
              icon: '📈',
              label: '设备统计',
              path: '',
              color: '#13c2c2',
              description: '设备数据分析'
            }
          ]
        },
        {
          id: 2,
          title: '设备运维',
          description: '设备状态与维护',
          menus: [
            {
              id: 201,
              icon: '🔋',
              label: '故障保修',
              path: '/pages/fix/add',
              color: '#722ed1',
              description: '故障保修信息'
            },
            {
              id: 202,
              icon: '🔄',
              label: '故障列表',
              path: '/pages/fix/fix',
              color: '#eb2f96',
              description: '故障列表信息'
            },
            {
              id: 203,
              icon: '📋',
              label: '我的工单',
              path: '/pages/fix/fix',
              color: '#fa8c16',
              description: '我处理的工单信息'
            },
            {
              id: 204,
              icon: '🔧',
              label: '/pages/doors/doors',
              path: '',
              color: '#a0d911',
              description: '仓门管理维护'
            }
          ]
        },
        // {
        //   id: 3,
        //   title: '门店运营',
        //   description: '门店管理与运营',
        //   menus: [
        //     {
        //       id: 301,
        //       icon: '🏪',
        //       label: '门店列表',
        //       path: '',
        //       color: '#1890ff',
        //       description: '所有门店信息'
        //     },
        //     {
        //       id: 302,
        //       icon: '📍',
        //       label: '位置管理',
        //       path: '',
        //       color: '#52c41a',
        //       description: '电柜位置分布'
        //     },
        //     {
        //       id: 303,
        //       icon: '👥',
        //       label: '人员管理',
        //       path: '',
        //       color: '#faad14',
        //       description: '门店人员配置'
        //     },
        //     {
        //       id: 304,
        //       icon: '💰',
        //       label: '收益统计',
        //       path: '',
        //       color: '#f5222d',
        //       description: '门店收益分析'
        //     }
        //   ]
        // },
        // {
        //   id: 4,
        //   title: '用户服务',
        //   description: '用户管理与服务',
        //   menus: [
        //     {
        //       id: 401,
        //       icon: '👤',
        //       label: '用户管理',
        //       path: '',
        //       color: '#722ed1',
        //       description: '用户信息管理'
        //     },
        //     {
        //       id: 402,
        //       icon: '⚡',
        //       label: '换电记录',
        //       path: '',
        //       color: '#eb2f96',
        //       description: '用户换电历史'
        //     },
        //     {
        //       id: 403,
        //       icon: '💳',
        //       label: '会员管理',
        //       path: '',
        //       color: '#fa8c16',
        //       description: '会员套餐设置'
        //     },
        //     {
        //       id: 404,
        //       icon: '📞',
        //       label: '客服工单',
        //       path: '',
        //       color: '#a0d911',
        //       description: '用户问题处理',
        //       badge: '5'
        //     }
        //   ]
        // },
        // {
        //   id: 5,
        //   title: '数据报表',
        //   description: '数据分析与报表',
        //   menus: [
        //     {
        //       id: 501,
        //       icon: '📊',
        //       label: '运营报表',
        //       path: '',
        //       color: '#1890ff',
        //       description: '运营数据统计'
        //     },
        //     {
        //       id: 502,
        //       icon: '📈',
        //       label: '收益报表',
        //       path: '',
        //       color: '#52c41a',
        //       description: '收益数据分析'
        //     },
        //     {
        //       id: 503,
        //       icon: '🔍',
        //       label: '设备报表',
        //       path: '',
        //       color: '#faad14',
        //       description: '设备使用统计'
        //     },
        //     {
        //       id: 504,
        //       icon: '📤',
        //       label: '报表导出',
        //       path: '',
        //       color: '#13c2c2',
        //       description: '数据导出功能'
        //     }
        //   ]
        // }
        // {
        //   id: 6,
        //   title: '工具中心',
        //   description: '实用工具集合',
        //   menus: [
        //     {
        //       id: 701,
        //       icon: '📱',
        //       label: '扫码换电',
        //       path: '',
        //       color: '#1890ff',
        //       description: '快速扫码换电'
        //     },
        //     {
        //       id: 702,
        //       icon: '🛠️',
        //       label: '设备调试',
        //       path: '',
        //       color: '#52c41a',
        //       description: '设备调试工具'
        //     },
        //     {
        //       id: 703,
        //       icon: '🔧',
        //       label: '批量操作',
        //       path: '',
        //       color: '#faad14',
        //       description: '批量处理工具'
        //     },
        //     {
        //       id: 704,
        //       icon: '📲',
        //       label: '远程控制',
        //       path: '',
        //       color: '#13c2c2',
        //       description: '远程设备控制'
        //     }
        //   ]
        // }
      ]
    }
  },

  computed: {
    filteredMenuGroups() {
      if (!this.searchKeyword) {
        return this.menuGroups
      }

      const keyword = this.searchKeyword.toLowerCase()
      return this.menuGroups.map(group => {
        const filteredMenus = group.menus.filter(menu => 
          menu.label.toLowerCase().includes(keyword) ||
          menu.description.toLowerCase().includes(keyword)
        )
        return {
          ...group,
          menus: filteredMenus
        }
      })
    },

    filteredMenuCount() {
      return this.filteredMenuGroups.reduce((count, group) => count + group.menus.length, 0)
    }
  },

  methods: {
    handleSearch() {
      // 搜索逻辑已经在computed中处理
    },

    clearSearch() {
      this.searchKeyword = ''
    },

    handleMenuClick(menu) {
      if (menu.path) {
        uni.navigateTo({
          url: menu.path
        })
      } else {
        uni.showToast({
          title: `${menu.label}暂未开放`,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.workbench-container {
  background: #f5f7fa;
  min-height: 100vh;
}

/* 搜索栏 */
.search-section {
  background: white;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 50rpx;
  padding: 20rpx 30rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.clear-icon {
  font-size: 28rpx;
  color: #999;
  padding: 10rpx;
}

/* 菜单容器 */
.menu-container {
  height: calc(100vh - 120rpx);
  padding: 20rpx;
}

/* 菜单分组 */
.menu-group {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  overflow: hidden;
}

.group-header {
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.group-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.group-desc {
  font-size: 24rpx;
  color: #999;
}

/* 菜单网格 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  border-right: 1rpx solid #f0f0f0;
  position: relative;
  transition: background-color 0.3s ease;
}

.menu-item:nth-child(even) {
  border-right: none;
}

.menu-item:active {
  background-color: #fafafa;
}

.menu-icon-wrapper {
  position: relative;
  margin-bottom: 20rpx;
}

.menu-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.menu-item:active .menu-icon {
  transform: scale(0.95);
}

.menu-icon .icon {
  font-size: 40rpx;
}

.menu-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff4d4f;
  color: white;
  border-radius: 20rpx;
  min-width: 36rpx;
  height: 36rpx;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
}

.menu-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  text-align: center;
}

.menu-desc {
  font-size: 22rpx;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

/* 空搜索结果 */
.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 40rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 60rpx;
}

.empty-btn {
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 20rpx 60rpx;
  font-size: 28rpx;
}
</style>